<!-- 首页 -->
<template>
    <div>
        <sg-navbar></sg-navbar>
        <div class="container">
            <el-row  :gutter="30">
                <el-col :sm="24" :md="16" style="transition:all .5s ease-out;margin-bottom:30px;">
                    <sg-articlelist></sg-articlelist>
                </el-col>
                <el-col :sm="24"  :md="8" >
                    <sg-rightlist></sg-rightlist>
                </el-col>
            </el-row>

          <!--通知公告详情 -->
          <el-dialog :title="form.noticeTitle" :visible.sync="openDetail" width="800px" append-to-body>
            <div style="margin-top:-20px;margin-bottom:10px;">
              <el-tag size="mini" effect="dark" type="warning" v-if="form.noticeType==2">公告</el-tag>
              <el-tag size="mini" effect="dark" v-else>信息</el-tag>
              <span style="margin-left:20px;">{{form.createTime}}</span>
            </div>
            <div v-loading="loadingDetail" class="content">
              <div v-html="form.noticeContent" style="margin-left:0px;margin-right:76px" class="ql-editor"></div>
            </div>
            <div slot="footer" class="dialog-footer">
              <el-button type="primary" @click="closeDetail"> 已 读 </el-button>
            </div>
          </el-dialog>
        </div>



    </div>
</template>

<script>
import header from '../components/header.vue'
import articlelist from '../components/articlelist.vue'
import rightlist from '../components/rightlist.vue'
import {getNotice} from "../api/notice";
    export default {
        name:'Home',
        data() { //选项 / 数据
            return {
                openDetail:false,
                loadingDetail : false,
                // 遮罩层
                loading: true,
                beforeRouteEntered: false, // 新增标志位
                form: {},
                flag: true
            }
        },
        methods: { //事件处理器
            closeDetail() {
                this.titleDetail = "详情";
                this.openDetail = false;
                this.reset();
            },

            openDetailDialog(id) {
                this.openDetail = true;
                this.loadingDetail = true;
                getNotice(id).then(response => {
                    this.form = response.data;
                    this.openDetail = true;
                    this.loadingDetail = false;
                });

            },
            reset() {
                this.form = {
                    noticeId: undefined,
                    noticeTitle: undefined,
                    noticeType: undefined,
                    noticeContent: undefined,
                    status: "0"
                };
                this.resetForm("form");
            },
            resetQuery() {
                this.resetForm("queryForm");
                this.handleQuery();
            },
            cancel() {
                this.open = false;
                this.reset();
            },
        },
        components: { //定义组件
            'sg-navbar':header,
            'sg-articlelist':articlelist,
            'sg-rightlist':rightlist,
        },

        created() { //生命周期函数

        },
    }
</script>

<style>

</style>
